<template>
  <div id="app" >
    <transition :name=runType @before-enter = "beforeEnter" @after-enter="afterEnter">
        <keep-alive include="index">
          <router-view style="transition: .3s ease all;background: #fff" ref="page"></router-view>
        </keep-alive>
    </transition>
  </div>
</template>

<script>
import constant from './common/constant'
import { mapGetters } from 'vuex'
import { getUrlParam } from '@/common/common'

export default {
  name: 'app',
  data() {
    return {
      runType: ''
    }
  },
  watch: {
    $route(to) {
      this.$store.dispatch('changeTransitPrgs', 'start');
      if (to.path != '/') {
        this.runType = 'left';
        this.$store.dispatch('saveScrollHeight', document.querySelector('.g-content').scrollTop);
      } else {
        this.runType = 'right';
      }
    }
  },
  computed: {
    ...mapGetters(
        ['transitProgress']
    )
  },
  methods: {
    beforeEnter() {
      this.$loop.pause();
    },
    afterEnter() {
      this.$loop.continue();
    },
    init () {
      let appusercode = getUrlParam('userCode') || '';
      if (appusercode !== '' && appusercode !== 0) {
        localStorage.setItem(constant.Storage.USER_CODE, appusercode);
      }
    }
  },
  created () {
    localStorage.clear();
    this.init();
    console.log(location.href)
  }
}
</script>

<style lang="less" >
@import 'assets/css/variables.less';
html,body{
  height: 100%;
  margin: 0;
  background-color: white;
}
#app {
   font-family:Helvetica, 'Avenir', PingFangSC-Regular, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   /*margin-top: 60px;*/
   font-size:16px;
   height:100%;
   background-color: white;
   width: 100%;
   position: absolute;
 }

 /******转场动画相关 Start***/
.left-enter{              //  分页进场
  transform: translateX(100%);
  &.g-content-wrapper {
    z-index: 10000001;
  }
}
.left-enter-active{       //  分页进场市 主页样式
  &.g-content-wrapper {
    z-index: 10000000;
  }
}
.right-enter{
  &.g-content-wrapper {
    /*z-index: 10000000;*/
  }
}
.right-leave-active{          //   分页出场
  &.g-content-wrapper {
    z-index: 10000001;
  }
  transform: translateX(100%);
}
/*****转场动画相关 End*/

li{
  list-style: none;
}
@media only screen and (min-width: 1080px),
only screen and (min-device-width:1080px) {
  html,
  body {
    font-size: 210px;
  }
}

@media only screen and (max-width: 1080px),
only screen and (max-device-width:1080px) {
  html,
  body {
    font-size: 200px;
  }
}

@media only screen and (max-width: 960px),
only screen and (max-device-width:960px) {
  html,
  body {
    font-size: 190px;
  }
}

@media only screen and (max-width: 800px),
only screen and (max-device-width:800px) {
  html,
  body {
    font-size: 180px;
  }
}

@media only screen and (max-width: 750px),
only screen and (max-device-width:750px) {
  html,
  body {
    font-size: 204.8px;
  }
}

@media only screen and (max-width: 640px),
only screen and (max-device-width:640px) {
  html,
  body {
    font-size: 160px;
  }
}

@media only screen and (max-width: 600px),
only screen and (max-device-width:600px) {
  html,
  body {
    font-size: 150px;
  }
}

@media only screen and (max-width: 540px),
only screen and (max-device-width:540px) {
  html,
  body {
    font-size: 140px;
  }
}

@media only screen and (max-width: 480px),
only screen and (max-device-width:480px) {
  html,
  body {
    font-size: 130px;
  }
}

@media only screen and (max-width: 414px),
only screen and (max-device-width:414px) {
  html,
  body {
    font-size: 110.4px;
  }
}

@media only screen and (max-width: 412px),
only screen and (max-device-width:412px) {
  html,
  body {
    font-size: 99px;
  }
}

@media only screen and (max-width: 375px),
only screen and (max-device-width:375px) {
  html,
  body {
    font-size: 100px;
  }
}

@media only screen and (max-width: 360px),
only screen and (max-device-width:360px) {
  html,
  body {
    font-size: 96px;
  }
}

@media only screen and (max-width: 320px),
only screen and (max-device-width:320px) {
  html,
  body {
    font-size: 85.33px;
  }
}

@media only screen and (max-width: 240px),
only screen and (max-device-width:240px) {
  html,
  body {
    font-size: 70px;
  }
}
</style>
